<div class="backpack-modal" id="backpack-modal" style="display: none;">
    <div class="backpack-content">
        <div class="backpack-header">
            <h2 class="backpack-title">背包</h2>
            <button class="close-backpack" @onclick="Close">&times;</button>
        </div>
        <div class="backpack-items">
            <div class="backpack-item" @onclick="UseItem">
                <div class="item-name">生命药水</div>
                <div class="item-desc">恢复50点生命值</div>
            </div>
            <div class="backpack-item" @onclick="UseItem">
                <div class="item-name">魔法药水</div>
                <div class="item-desc">恢复30点魔法值</div>
            </div>
            <div class="backpack-item" @onclick="UseItem">
                <div class="item-name">解毒剂</div>
                <div class="item-desc">解除中毒状态</div>
            </div>
            <div class="backpack-item" @onclick="UseItem">
                <div class="item-name">力量药剂</div>
                <div class="item-desc">暂时提升力量</div>
            </div>
            <div class="backpack-item" @onclick="UseItem">
                <div class="item-name">敏捷药剂</div>
                <div class="item-desc">暂时提升敏捷</div>
            </div>
            <div class="backpack-item" @onclick="UseItem">
                <div class="item-name">传送卷轴</div>
                <div class="item-desc">传送到安全区域</div>
            </div>
        </div>
    </div>
</div>

<style>
    /* 背包弹窗样式 */
    .backpack-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }
    
    .backpack-content {
        background-color: rgba(20, 20, 40, 0.95);
        border: 2px solid #4a2c8d;
        border-radius: 10px;
        padding: 20px;
        width: 80%;
        max-width: 600px;
        max-height: 80%;
        overflow-y: auto;
        box-shadow: 0 0 30px rgba(106, 13, 173, 0.8);
    }
    
    .backpack-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #4a2c8d;
    }
    
    .backpack-title {
        font-size: 1.5rem;
        color: #b19cd9;
    }
    
    .close-backpack {
        background: none;
        border: none;
        color: #b19cd9;
        font-size: 1.5rem;
        cursor: pointer;
    }
    
    .backpack-items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
    
    .backpack-item {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 8px;
        padding: 15px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .backpack-item:hover {
        background-color: rgba(40, 40, 80, 0.9);
        border-color: #6a0dad;
        transform: translateY(-3px);
    }
</style>

@code {
    [Inject] public IJSRuntime JS { get; set; }
    
    // 关闭背包
    private void Close()
    {
        JS.InvokeVoidAsync("eval", @"
            var modal = document.getElementById('backpack-modal');
            if (modal) modal.style.display = 'none';
        ");
    }
    
    // 使用物品
    private void UseItem()
    {
        JS.InvokeVoidAsync("eval", @"
            var event = arguments[0];
            var itemName = event && event.currentTarget ? event.currentTarget.querySelector('.item-name').textContent : '';
            var battleLog = document.querySelector('.battle-log');
            
            // 添加使用物品日志
            var logEntry = document.createElement('div');
            logEntry.className = 'battle-log-entry';
            logEntry.textContent = '[艾莉丝] 使用了 [' + itemName + ']！';
            if (battleLog) battleLog.appendChild(logEntry);
            
            // 滚动到底部
            if (battleLog) battleLog.scrollTo(0, battleLog.scrollHeight);
            
            // 关闭背包
            var modal = document.getElementById('backpack-modal');
            if (modal) modal.style.display = 'none';
        ");
    }
}